import { useEffect, useState } from 'react';
import EmojiPopup from '../emojiPopup';

import {
    helper_bar,
    helper_bar_left,
    helper_bar_right,

    helper_bar_emoji,

    active,

    helper_popup,

} from './index.module.css'

function ChatHelper() {

    const [activeFunc, setActiveFunc] = useState('');

    // 当弹出框选择完后消失
    useEffect(() => {
        document.onclick = null;

        if (activeFunc !== '') {
            document.onclick = () => {
                setActiveFunc('');
            }
        }
    }, [activeFunc]);

    return (
        <div className={helper_bar}>
            <div className={helper_bar_left}>
                <div 
                    className={`${helper_bar_emoji} ${activeFunc === 'emoji' ? active :'' }`} 
                    title="选择表情" 
                    onClick={() => activeFunc === 'emoji' ? setActiveFunc('') : setActiveFunc('emoji')}
                ></div>
            </div>
            <div className={helper_bar_right}></div>
            <div className={helper_popup}>
                {
                    activeFunc === 'emoji' ? <EmojiPopup /> :
                    ''
                }
            </div>
        </div>
    )
}


export default ChatHelper;
